<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :is-back="true"
        title="昵称"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="flex justify-between px-5 w-full">
          <view></view>
          <view class="w-[68px] h-[28px] bg-[#00A9AB] rounded-full flex justify-center items-center" @click="complete">
            <view class="text-[14px] text-[#FFFFFF]"> 完成 </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <view class="p-4">
      <view class="w-full h-[40px] bg-[#FFFFFF] rounded-[8px] px-3">
        <input type="text" placeholder="请输入昵称" maxlength="15" v-model="nickname" class="size-full" />
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 控制页面滚动状态
        dataList: [], // 分页数据列表
        automatic: false, // 是否自动加载数据
        nickname: '' // 用户昵称
      }
    },
    onLoad(e) {
      this.nickname = e.nickname
    },
    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async complete() {
        if (!this.nickname) return vk.toast('请输入昵称', 'none')
        let res = await api.editNickname({ nickname: this.nickname })
        vk.toast(res.msg)
        if (!res.code) return
        vk.vuex.dispatch('$user/getUserInfo')
        vk.navigateBack()
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
